﻿@model Nop.Plugin.ActiveForever.ActiveChat.Models.ActiveChatModel

<!DOCTYPE html>
<html lang="en">
  <head>

    <meta charset="utf-8">
    <title>ActiveChat - Operator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href="~/Plugins/ActiveForever.ActiveChat/Content/livechat.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="~/Plugins/ActiveForever.ActiveChat/Scripts/jquery.signalR-1.1.2.min.js"></script>
    <script src="/signalr/hubs"></script>
    <script src="~/Plugins/ActiveForever.ActiveChat/Scripts/livechat-operator.js"></script>
    <script src="~/Plugins/ActiveForever.ActiveChat/Scripts/jquery.prettyDate.js"></script>
    <script src="~/Plugins/ActiveForever.ActiveChat/Scripts/jquery.cookie.js"></script>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(function () {
            liveChatOperator.init({ welcomeMessage: '@Model.OperatorWelcomeMessage', playSounds: true });
        });
    </script>

</head>
<body class="liveChat">


<div id="content">

    <div class="container">

        <div class="row">

            <div class="span10">
                <h3 class="title">ActiveChat</h3>
            </div>
            <div class="span2">
            </div>
        </div>

        <div class="row">
            <div class="span12">

                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="container">
                            <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </a>
                            <a class="brand" href="#">Operator: <span id="label-operatorName">n/a</span></a>
                                <div class="nav-collapse collapse navbar-responsive-collapse">
                                    <ul class="nav">
                                        <li class="divider-vertical"></li>
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Options <b class="caret"></b></a>
                                            <ul class="dropdown-menu">
                                                <li><a href="javascript:void(0)" id="link-playSounds"><i class="icon-volume-up"></i> Play/Mute Sounds</a></li>
                                            </ul>
                                        </li>
                                        <li class="divider-vertical"></li>
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tools <b class="caret"></b></a>
                                            <ul class="dropdown-menu">
                                                <li><a href="javascript:void(0)" id="link-bannedClients">Banned Clients</a></li>
                                                <li><a href="javascript:void(0)" id="link-cannedResponses">Canned Responses</a></li>
                                                <li><a href="javascript:void(0)" id="link-transcriptHistory">Transcript History</a></li>
                                            </ul>
                                        </li>                                   
                                    </ul>
                                </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="row">

            <div class="span4">

                <div class="box" style="height: 600px; overflow-y: auto">
                    <div style="margin: 10px">
                        <h5><i class="icon-group"></i> Chat Queue</h5>
                        <ul class="nav" id="chatQueue"></ul>
                        <hr />
                        <h5><i class="icon-user"></i> Operators</h5>
                        <ul class="nav" id="operatorsList"></ul>
                    </div>
                </div>

            </div>
            <div class="span8">

                <div class="box show-banner-plain" id="containerLiveChat">

                    <div id="noChatText" class="chat-container">
                        <strong>No chats open.</strong><br />
                        Select a client from the chat queue...

                        <hr />
                        <div class="row-fluid">
                            <div class="span4" style="text-align: center">
                                <p>Chats</p>
                                <h2>@Model.TotalChatCount</h2>
                            </div>
                            <div class="span4" style="text-align: center">
                                <p>Banned Clients</p>
                                <h2>@Model.TotalBannedClients</h2>
                            </div>
                            <div class="span4" style="text-align: center">
                                <p>Most Active Operator</p>
                                <h2>@Model.MostActiveOperator</h2>
                            </div>
                        </div>
                        <hr />
                        <div class="row-fluid">
                            <div class="span6" style="text-align: center">
                                <p>Avg. Chat Time</p>
                                <h2>@Model.AverageChatTime Minute(s)</h2>
                            </div>
                            <div class="span6" style="text-align: center">
                                <p>Avg. Messages Per Chat</p>
                                <h2>@Model.AverageMessagesPerChat</h2>
                            </div>
                        </div>

                    </div>

                    <div id="chatText" class="hide chat-container">

                        <div id="typing-indicator-operator">
                            <i class="icon-spinner icon-spin"></i> Client is typing...
                        </div>
                        <div id="liveChatText" class="chatBox" style="height: 400px; border-bottom: solid 1px #CCC"></div>
                        <div class="row-fluid">
                            <div class="span12">
                                <div style="padding: 10px">
                                    <textarea id="textLiveChatMessage" style="height: 60px"></textarea>
                                    <button class="btn btn-primary" id="btnSendChatMessage" style="height: 70px; margin-top: -10px">Send</button>
                                </div>
                            </div>
                        </div>

                        <div class="row-fluid">
                            <div class="span12">

                                <div style="margin: 10px">
                                    <div class="navbar">
                                        <div class="navbar-inner">

                                            <div class="nav-collapse collapse navbar-responsive-collapse">
                                                <ul class="nav">
                                                    <li class="dropdown" id="cannedResponsesDropdown">
                                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Canned Responses <b class="caret"></b></a>
                                                        <ul class="dropdown-menu" id="cannedResponses">
                                                        </ul>
                                                    </li>
                                                </ul>
                                                <ul class="nav pull-right">
                                                    <li>
                                                        <a href="#" id="link-EndChat">End Chat</a>
                                                    </li>
                                                </ul>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="row">
            <div class="span12">
                <div class="box">

                    <div style="margin: 10px" id="transcripts-container">
                        <h5><i class="icon-comments-alt"></i> Recent Transcripts</h5>
                        <hr />
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Operating System</th>
                                    <th>Browser</th>
                                    <th>Client IP</th>
                                    <th>Started</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="transcripts"></tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>

        <div class="row">
            <div class="span12" style="text-align: right; color: #666; font-size: 10px; margin-top: -10px">
                @DateTime.Now.Year.ToString() ActiveChat | Version 1.8
            </div>
        </div>

    </div>
</div>

<!---------- Start Modals ---------->

<div class="modal hide" id="modalOperatorName">

    <div class="modal-header">
        <h3>Live Chat - Operator Sign In</h3>
    </div>

    <div class="modal-body form-horizontal">

        <p>Enter your name below. This will be displayed to clients during chat sessions.</p>
        <hr />
        <div class="control-group">
            <div class="control-label">Your name</div>
            <div class="controls">
                <input type="text" class="span3" id="textOperatorName" name="textOperatorName" />
            </div>
        </div>

    </div>

    <div class="modal-footer">
        <button class="btn" id="btnStartOperatorChat">Sign In</button>
    </div>

</div>


<div class="modal modal-large hide" id="modalTranscript">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3>Transcript Details</h3>
    </div>

    <div class="modal-body">

        <table class="table table-striped">
            <thead>
                <tr>
                    <th>To</th>
                    <th>From</th>
                    <th>Message</th>
                    <th>Timestamp</th>
                </tr>
            </thead>
            <tbody id="transcriptMessagesContainer"></tbody>
        </table>

    </div>

    <div class="modal-footer">
        <button type="button" class="btn" data-dismiss="modal">Close</button>
    </div>

</div>

<div class="modal modal-large hide" id="modalTranscriptHistory">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3>Transcript History</h3>
    </div>

    <div class="modal-body">

        <table class="table table-striped">
            <thead>
                <tr>
                    <th>To</th>
                    <th>From</th>
                    <th>Message</th>
                    <th>Timestamp</th>
                </tr>
            </thead>
            <tbody id="transcriptHistoryMessagesContainer"></tbody>
        </table>

    </div>

    <div class="modal-footer">
        <button type="button" class="btn" data-dismiss="modal">Close</button>
    </div>

</div>

<div class="modal modal-large hide" id="modalBannedClients">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3>Banned Clients</h3>
    </div>

    <div class="modal-body">

        <div class="alert alert-info hide" id="alertJustAdded">The client has been banned from using your live chat.</div>

        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Client IP</th>
                    <th>Banned On</th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="bannedClientsContainer"></tbody>
        </table>

    </div>

    <div class="modal-footer">
        <button type="button" class="btn" data-dismiss="modal">Close</button>
    </div>

</div>

<div class="modal modal-large hide" id="modalCannedRespones">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3>Canned Responses</h3>
    </div>

    <div class="modal-body">

        <div class="input-append">
            <input type="text" class="span6" id="text-cannedResponseMessage" />
            <button class="btn" id="btn-addCannedResponseMessage">Add Message</button>
        </div>
        <hr />
        <table class="table table-striped">
            <thead>
                <tr>
                    <th></th>
                    <th>Message</th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="cannedResponsesContainer"></tbody>
        </table>

    </div>

    <div class="modal-footer">
        <button type="button" class="btn" data-dismiss="modal">Close</button>
    </div>

</div>

<div class="modal hide" id="modalUpgrade">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3>Upgrade Required!</h3>
    </div>

    <div class="modal-body">

        <p>You are trying to access a feature that is not available in the free version. Upgrade now to enjoy all these great benefits!</p>
        <hr />
        <ul>
            <li>Easy one-time payment of $99.00 (USD)</li>
            <li>No more monthly charges for live chat</li>
            <li>Unlimited Operators</li>
            <li>Notification sounds</li>
            <li>Ban Clients</li>
            <li>Canned Responses</li>
            <li>Free Upgrades</li>
            <li>And more...</li>
        </ul>
        
    </div>

    <div class="modal-footer">
        <div class="pull-left">
            <form action="@Url.RouteUrl("Nop.Plugin.ActiveForever.ActiveChatChargeCard")">
                <script
                    src="https://checkout.stripe.com/v2/checkout.js" class="stripe-button"
                    data-key="pk_live_i36Q8LIMwQyFZENlT0CnxkE7"
                    data-amount="9900"
                    data-name="ActiveChat"
                    data-description="NopCommerce Plugin - Full Version"
                    data-currency="usd"
                    data-image="/Plugins/ActiveForever.ActiveChat/Content/arrow_up.png"
                    data-label="Upgrade Now">
                </script>
            </form>
        </div>
        <button type="button" class="btn" data-dismiss="modal">Close</button>
    </div>

</div>

<audio id="chatAudio">
    <source src="~/Plugins/ActiveForever.ActiveChat/Content/Sounds/notify.ogg" type="audio/ogg">
    <source src="~/Plugins/ActiveForever.ActiveChat/Content/Sounds/notify.mp3" type="audio/mpeg">
    <source src="~/Plugins/ActiveForever.ActiveChat/Content/Sounds/notify.wav" type="audio/wav">
</audio>

</body>
</html>
